/**
 * Created by Administrator on 2017/8/23.
 */
var ctx = null;
var fontSize = null;
var width = null;
var height = null;
var line = {
    width:null,
    height:null,
    offsetX:null,
    offsetY:null,
}
var obj = null;
var Max = null;
var setTin = null;
    $(function () {
    fontSize = parseFloat($("html").css("font-size"));
    width = adaptation2(640);
    height = adaptation2(486);
    line = {
        width:adaptation2(500),
        height:adaptation2(367),
        offsetX:adaptation2(75),
        offsetY:adaptation2(32.5),
    }
    var lineCan = $("#childreLine").attr("height",height).attr("width",width).get(0);
    //添加监听事件
    // lineCan.addEventListener("click",function (event) {
    //     var event = window.event || event;
    //     var offsteLeft = $("#childreLine").offset().left;
    //     var offsetTop = $("#childreLine").offset().top;
    //     var pageX = event.pageX;
    //     var pageY = event.pageY;
    //     var x = pageX-offsteLeft-adaptation2(46)/2;
    //     var y = pageY-offsetTop-adaptation2(25)/2;
    //     var btnHeight = adaptation2(15)/2;
    //     var btnWidth = adaptation2(30)/2;
    //     var spacing = adaptation2(20)/2;
    //     if(y<0 && y>-btnHeight){
    //         var index = Math.floor(((line.width/2)-x)/(btnWidth+spacing));
    //         if(((index+1)*(btnWidth+spacing))-spacing>(line.width/2)-x){
    //             if(index>=0 && index<obj.series.length){
    //                 clearInterval(setTin);
    //                 ctx.translate(adaptation2(-46),adaptation2(-25));
    //                 ctx.clearRect(0,0,width,height);
    //                 drawFrame();
    //                 drawLine(ctx,arr[0]);
    //                 drawCurve(ctx,obj.series,index);
    //             }
    //         }
    //     }
    // },true);

    ctx = lineCan.getContext("2d");
});

function drawLineChat(obj) {
    drawFrame();
    drawLine(ctx,obj);
    this.onload = function (obj) {
        //添加相应的品牌按钮
        var legend = obj.legend.data;
        var html = "";
        for(var i=0;i<legend.length;i++){
            html+="<li>"+legend[i]+"</li>"
        }
        $("#brandList").find("ul").html(html);

        clearInterval(setTin);
        ctx.translate(-line.offsetX,-line.offsetY);
        ctx.clearRect(0,0,width,height);
        drawFrame();
        drawLine(ctx,obj);
        addDrawCurveAmin(ctx,obj.series,obj.series.length);
    }
    this.selectLine = function (obj,index) {
        clearInterval(setTin);
        ctx.translate(-line.offsetX,-line.offsetY);
        ctx.clearRect(0,0,width,height);
        drawFrame();
        drawLine(ctx,obj);
        drawCurve(ctx,obj.series,index);
    }
}
//绘制折线图外框
function drawFrame() {
    ctx.beginPath();
    //设置最大值
    Max = 1400;
}
/**绘画路线**/
function drawLine(ctx,obj) {
    ctx.translate(line.offsetX,line.offsetY);
    //绘制标题
    ctx.beginPath();
    //设置字体的颜色为蓝色
    ctx.fillStyle = "#80c8d4";
    //设置字体度宽
    ctx.font = "bold "+adaptation2(13)+"px Arial";
    ctx.fillText("ECONOMIC BALANCE",adaptation2(15),adaptation2(15));
    ctx.stroke();
    //绘制标题
    ctx.beginPath();
    //设置字体的颜色为蓝色
    ctx.fillStyle = "#80c8d4";
    //设置字体度宽
    ctx.font = "100 "+adaptation2(13)+"px Arial";
    ctx.fillText("CRISIS 2015",adaptation2(15),adaptation2(35));
    ctx.stroke();
    ctx.save();
    var xAxis = obj.xAxis.data;
    var len = xAxis.length;
    var w = line.width/len;
    for (var i=0;i<len;i++){
        ctx.save();
        ctx.beginPath();
        ctx.textAlign="center";
        ctx.fillStyle = "#80c8d4";
        ctx.font = "200 "+adaptation2(15)+"px Arial";
        ctx.fillText(xAxis[i],w*i,line.height+adaptation2(25));
        ctx.strokeStyle = "#80c8d4";
        ctx.lineWidth = adaptation2(2);
        ctx.moveTo(w*i,line.height+adaptation2(2));
        ctx.lineTo(w*i,line.height-adaptation2(2));
        ctx.stroke();
        ctx.restore()
    }

    // ctx.beginPath();
    // //设置字体的颜色为蓝色
    // ctx.fillStyle = "#80c8d4";
    // //设置字体度宽
    // ctx.font = "200 "+adaptation2(8)+"px Arial";
    // ctx.rotate(-90*Math.PI/180);
    // ctx.fillText("Positive hyper growth rote",adaptation2(-130),adaptation2(-5));
    // ctx.stroke();
    // ctx.restore();
    // ctx.beginPath();
    // //设置字体的颜色为蓝色
    // ctx.fillStyle = "#dddfe2";
    // //设置字体度宽
    // ctx.font = "100 "+adaptation2(8)+"px Arial";
    // drawText(ctx,"Positive hyper growth rotePositive hyper growth rotePositive hyper growth rotePositive hyper growth rotePositive hyper growth rotePositive hyper growth roteitive hyper growth  hyper growth roteitive hyper growth rot itive hyper growth rotrot itive hyper growth rot",adaptation2(-30),adaptation2(232),adaptation2(370));
    // ctx.stroke();

    var doubleLine = {
        starX:0,
        starY:0,
        width:line.height-adaptation2(5),
        direction:true,
        w:adaptation2(2),
        color:"#80c8d4",
        num:1,
        spacing:adaptation2(0),
        doubleN:20,
        doubleW:adaptation2(5)
    }
    drawDoubleLine(ctx,doubleLine);
    //绘制实线
    /**
     * obj对象熟悉详解
     * starX    起始点坐标
     * starY
     * width   长度
     * direction 方向（X:true与Y：false）
     * w   画笔宽度
     *color    画笔的颜色
     * num    数量
     * spacing 间距
     *
     * */
    var solidLine = {
        starX:0,
        starY:line.height,
        width:line.width,
        direction:false,
        w:adaptation2(1),
        color:"#80c8d4",
        num:1,
        spacing:adaptation2(30)
    }
    drawSildLine(ctx,solidLine);
    //drawBtn(ctx,obj.series)
}

/***绘制控制曲线按钮**/
function drawBtn(ctx,series) {
    var height = adaptation2(15);
    var width = adaptation2(30);
    var spacing = adaptation2(20);
    for (var i=0;i<series.length;i++){
        ctx.beginPath();
        ctx.fillStyle = series[i].color;
        ctx.fillRect(line.width-i*spacing-(i+1)*width,-height,width,height);
        ctx.beginPath();
        ctx.font="20px Georgia";
        ctx.fillStyle = "#FFF";
        ctx.fillText(obj.legend.data[i],line.width-i*spacing-(i+1)*width,height)
    }
}

/****绘画曲线动画**/
function addDrawCurveAmin(ctx,series,index){
    var activityW = 0;
    setTin = setInterval(function () {
        setIFun();
        if(activityW>=line.width){
            clearInterval(setTin);
        }
    },10);
    //延时
    var setIFun = function() {
        ctx.save();
        ctx.strokeStyle="rgba(0,0,0,0)";
        ctx.beginPath();
        ctx.rotate(-75*Math.PI/180);
        ctx.rect(-height,0,2*height,adaptation2(activityW));
        ctx.stroke();
        ctx.clip();
        ctx.rotate(75*Math.PI/180);
        drawCurve(ctx,series,index);
        ctx.restore()
        activityW+=4;
    }
}
/***绘画曲线*/
function drawCurve(ctx,series,index) {
    //ctx.clearRect(0,0,width,height);
    var H = line.height;
    var h = H/9*7;
    var w = line.width/series[0].data.length-1;
    var y = 0;
    var x = 0;
    var activeI = index;
    for(var i=0;i<series.length;i++){
        if(i==activeI)continue;
        draw(i);
    }
    if(activeI<series.length){
        draw(activeI);
    }
    function draw(i) {
    var data = series[i].data;
        for (var z = 0; z <data.length ; z++) {
            y = H - h * data[z] / Max;
            x = z * w - adaptation2(3);
            if(z==0){
                ctx.beginPath();
                if(i!=index){
                    ctx.lineWidth=adaptation2(1);
                    ctx.strokeStyle=series[i].color;
                }else {
                    ctx.lineWidth=adaptation2(6);
                    ctx.strokeStyle=series[index].color;
                }
                if(x<0){
                    x=0;
                }
                ctx.moveTo(x,y);
            }else {
                ctx.lineTo(x, y);
                ctx.stroke();
            }
            if(z>=data.length-1){
                for(var j=1;j<data.length;j++){
                    y = H - h * data[j] / Max;
                    x = j * w - adaptation2(3);
                    //开始一个新的绘制路径
                    ctx.beginPath();
                    //设置弧线的颜色为蓝色
                    ctx.fillStyle = "#FFFFFF"
                    //ctx.lineWidth = adaptation2(1);
                    //沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线
                    if(index==i){
                        ctx.lineWidth = adaptation2(4);
                        //绘制值
                        ctx.save();
                        ctx.beginPath();
                        ctx.textAlign="center";
                        ctx.fillStyle = series[i].color;
                        //设置字体度宽
                        ctx.font = "100 "+adaptation2(13)+"px Arial";
                        ctx.fillText(series[i].data[j],x-adaptation2(2),y-adaptation2(15));
                        ctx.stroke();
                        ctx.restore()
                        ctx.arc(x, y, adaptation2(6), 0, 2 * Math.PI, false);
                    }else {
                        ctx.arc(x, y, adaptation2(3), 0, 2 * Math.PI, false);
                    }
                    //按照指定的路径绘制弧线
                    ctx.fill();
                    ctx.stroke();
                }
            }
        }
    }
}

/***绘画虚线**/
/**
 * obj对象熟悉详解
 * starX    起始点坐标
 * starY
 * width   长度
 * direction 方向（X:true与Y：false）
 * w   画笔宽度
 *color    画笔的颜色
 * num    数量
 * spacing 间距
 * doubleN 虚线点数量
 * doubleW 虚线点宽度
 *
 * */
function drawDoubleLine(ctx,obj) {
    for (var i=0;i<obj.num;i++){
        var x = 0;
        var y = 0;
        //虚线点间隔
        var d = (obj.width-(obj.doubleN*obj.doubleW))/obj.doubleN;
        ctx.beginPath();
        ctx.strokeStyle = obj.color;
        ctx.lineWidth = obj.w;
        if(obj.direction){
            y = obj.starY;
            x = obj.starX+obj.spacing*i;
            for (var j=0;j<=obj.doubleN;j++){
                if(j==0){
                    ctx.moveTo(x,y);
                }else {
                    ctx.moveTo(x,y+=d);
                }
                ctx.lineTo(x,y+=obj.doubleW);
            }
        }else {
            y = obj.starY+obj.spacing*i;
            x = obj.starX;
            for (var j=0;j<=obj.doubleN;j++) {
                if(j==0){
                    ctx.moveTo(x, y);
                }else {
                    ctx.moveTo(x+=d, y);
                }
                ctx.lineTo(x+=obj.doubleW, y);
            }
        }
        ctx.stroke();
    }
}
/**绘制实线**/
/**
 * obj对象熟悉详解
 * starX    起始点坐标
 * starY
 * width   长度
 * direction 方向（X:true与Y：false）
 * w   画笔宽度
 *color    画笔的颜色
 * num    数量
 * spacing 间距
 *
 * */
function drawSildLine(ctx,obj) {

    for (var i=0;i<obj.num;i++){
        var x = 0;
        var y = 0;
        ctx.beginPath();
        ctx.strokeStyle = obj.color;
        ctx.lineWidth = obj.w;
        if(obj.direction){
            y = obj.starY;
            x = obj.starX+obj.spacing*i;
            ctx.moveTo(x,y);
            ctx.lineTo(x,y+obj.width);
        }else {
            y = obj.starY+obj.spacing*i;
            x = obj.starX;
            ctx.moveTo(x,y);
            ctx.lineTo(x+obj.width,y);
        }
        ctx.stroke();
    }
}
/**绘制文字自动换行**/
function drawText(ctx,t,x,y,w){

    var chr = t.split("");
    var temp = "";
    var row = [];

    for(var a = 0; a < chr.length; a++){
        if( ctx.measureText(temp).width < w ){
            ;
        }
        else{
            row.push(temp);
            temp = "";
        }
        temp += chr[a];
    }

    row.push(temp);

    for(var b = 0; b < row.length; b++){
        ctx.fillText(row[b],x,y+(b+1)*adaptation2(10));
    }
}
/***
 * 手机尺寸适配
 * 像素
 * */
function adaptation2(px) {
    return px/16*fontSize*2;
}

var Tool = {
    /**获取动态数据的最大值**/
    getMax:function () {
        var arr = [];
        for (var i=0;i<obj.series.length;i++){
            arr.push(obj.series[i].data.max());
        }
        return arr.max();
    },
    /**获取动态数据的最小值**/
    getMin:function () {
        var arr = [];
        for (var i=0;i<obj.series.length;i++){
            arr.push(obj.series[i].data.min());
        }
        return arr.min();
    }
}
//为数组添加最小值功能
Array.prototype.min = function() {
    var min = this[0];
    var len = this.length;
    for (var i = 1; i < len; i++){
        if (this[i] < min){
            min = this[i];
        }
    }
    return min;
}
//为数组添加最大值功能
Array.prototype.max = function() {
    var max = this[0];
    var len = this.length;
    for (var i = 1; i < len; i++){
        if (this[i] > max) {
            max = this[i];
        }
    }
    return max;
}